<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/public::common-public}">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
</head>
<style>
    .layui-input {
        width: 90%;
        margin-top: 10px;
    }
</style>
<body>

</body>
<script src="//unpkg.com/layui@2.8.17/dist/layui.js"></script>
<script>
    layui.use('form', function () {
        let form = layui.form;
        let $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: "/upload/addImage",
                method: "post",
                data: data.field,
                dataType: "JSON",
                success: function (res) {
                    if (res == 1) {
                        layer.msg("已经成功添加到数据库中");
                    }
                }
            })
            return false;
        });
    });


    layui.use('upload', function () {
        let upload = layui.upload;
        /*let layer = layui.layer;
        let element = layui.element;*/
        let $ = layui.$;
        // 单图片上传
        let uploadInst = upload.render({
            elem: '#upload-button'
            , url: '/upload/image' // 实际使用时改成您自己的上传接口即可。
            /* before: function(obj){
               // 预读本地文件示例，不支持ie8
               obj.preview(function(index, file, imagePath){
                 $('#ID-upload-demo-img').attr('src', imagePath); // 图片链接（base64）
                 $('#goodsImage').attr('value', imagePath);
                 $("input[name='image']").val(imagePath);
               });

               element.progress('filter-demo', '0%'); // 进度条复位
               layer.msg('上传中', {icon: 16, time: 0});
             }*/
            , done: function (res) {
                if (res.code == 1) {
                    //成功了
                    layer.msg(res.msg);
                    //获得上传的访问路径
                    let imagePath = res.data.src;
                    $("#image").attr("src", imagePath);
                    $("#goodsImage").attr("value", imagePath);
                    $("input[name='image']").val(imagePath);

                } else {
                    layer.msg(res.msg);
                }

            }

            , error: function () {
                // 演示失败状态，并实现重传
                /* var demoText = $('#ID-upload-demo-text');
                 demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                 demoText.find('.demo-reload').on('click', function(){
                   uploadInst.upload();
                 });*/

                // 进度条
                /*,progress: function(n, elem, e){
                  element.progress('filter-demo', n + '%');
                  if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                  }*/
            }
        });

    });

</script>
</html>
